<div class="clearfix">
<% if(!_.isUndefined(authuser.user) && (authuser.user.role_id == 1 ||  !_.isEmpty(organization.acl_links.where({slug: "add_organization_user",organization_user_role_id: parseInt(organization.organization_user_role_id)})))) { %>
<div>
	<ul class="list-inline clearfix">
		<li class="dropdown pull-right">
			<a class="btn btn-primary dropdown-toggle js-add-member-dropdown" data-toggle="dropdown" href="#"><span><i class="icon-plus"></i></span><span><%- i18next.t('Add Member') %></span></a>
			<ul class="dropdown-menu arrow arrow-right">
				<li class="js-add-member-dropdown-load js-dropdown-popup dropdown-popup js-organization-member-search-response">
					<div>
						<div class="clearfix text-center col-xs-12">							
							<span class="col-xs-10"><strong><%- i18next.t('Members') %></strong></span><a class="js-close-popover pull-right" href="#"><i class="icon-remove"></i></a></span></h4>							
						</div>
						<div class="col-xs-12 divider"></div>
						<div class="col-xs-12">
							<ul class="list-unstyled">
								<li>
								  <form method="post" class="text-center">
									<div class="form-group">
									  <label class="sr-only"><%- i18next.t('Search Member') %></label>
									  <input type="text" autocomplete="off" id="inputOrganizationUserSearch" placeholder="<%- i18next.t('Email or Username') %>" name="email" required class="js-organization-users-search form-control input-sm" title="<%- i18next.t('Email or Username') %>">
									</div>
								  </form>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="small col-xs-12">
					<%- i18next.t('Search for a person in %s by name or email address.', { postProcess: 'sprintf', sprintf: [SITE_NAME]}) %>
				</li>
			</ul>
		</li>
	<ul>
</div>
<% } %>
<% if(!_.isUndefined(authuser.user) && (authuser.user.role_id == 1 || !_.isEmpty(organization.acl_links.where({slug: "view_organization_user_listing",organization_user_role_id: parseInt(organization.organization_user_role_id)})))) { %>
<div>
	<table class="table table-striped table-hover">
		<tbody>
			<%  if(!_.isEmpty(organizations_users)){
			var organization_user_roles = ["Owner","Editor","Viewer"];
			%>
				<% _.each(organizations_users.models, function(organizations_user){ %>
				<tr>
					<td>
						<div class="clearfix">
						<span class="pull-left navbar-btn">
							<a href="#/user/<%-organizations_user.attributes.user_id %>">
							<% if(!_.isEmpty(organizations_user.attributes.profile_picture_path)) {
								 var profile_picture_path = organizations_users.showImage('User', organizations_user.attributes.user_id, 'small_thumb' );
							%>
								<img src="<%=profile_picture_path%>" alt="[Image: <%-organizations_user.attributes.username %>]" data-toggle="tooltip" data-placement="bottom" data-original-title="<%- organizations_user.attributes.username %>" class="img-rounded img-responsive">
							<% } else {%>
								<i data-toggle="tooltip" data-placement="bottom" data-original-title="<%- organizations_user.attributes.username %>" class="avatar avatar-color-194 img-rounded"><%- organizations_user.attributes.initials %></i>									
							<% } %>
							</a>
						</span>
							<div class="pull-left col-xs-10">
								<h4 class="list-group-item-text list-group-item-heading"><a href="#/user/<%-organizations_user.attributes.user_id %>"><%- organizations_user.attributes.full_name %></a></h4>
								<% if(!_.isEmpty(role_links.where({slug: "starred_board"}))){ %>
									<span class="show"><a href="#/user/<%-organizations_user.attributes.user_id %>"><%- organizations_user.attributes.username %></a></span>
								<% } else { %>
									<span class="show"><%- organizations_user.attributes.username %></span>
								<% } %>
							</div>
							</td>
							<td>
								<div class="text-right">
									<ul class="list-inline clearfix">
										<li class="dropdown navbar-btn">
											<a title="<%- i18next.t('Boards') %>" class="btn btn-default <% if(organizations_user.attributes.user_board_count != 0){ %>dropdown-toggle<%}else{%>js-no-action<%}%>" href="#" <% if(organizations_user.attributes.user_board_count != 0){ %>data-toggle="dropdown"<%}%>>
											<%- i18next.t('{{count}} Board', {count: organizations_user.attributes.user_board_count}) %>
											</a>
											<% if(organizations_user.attributes.boards_users != null && organizations_user.attributes.user_board_count != 0){ %>
												<ul class="dropdown-menu arrow arrow-left  text-left" role="boards" id="js-user-activity-menu-response-<%- organizations_user.attributes.id%>">
													<% _.each(organizations_user.attributes.boards_users, function(boards_user){%>
														<li>
														<% if(!_.isEmpty(role_links.where({slug: "starred_board"}))){ %>
															<a href="#/board/<%-boards_user.board_id%>"><%-boards_user.name%></a>
														<% } else { %>
															<a href="#"><%-boards_user.name%></a>
														<% } %>
														</li>
													<%})%>
												</ul>
											<%}%>
										</li>										
										<li class="navbar-btn">											
										<a title="<%- i18next.t('Activities') %>" class="btn btn-default js-all-user-activities" href="#" data-user_id="<%- organizations_user.attributes.user_id %>"><%- i18next.t('Activities') %></a>
										</li>
										<% if(!_.isUndefined(authuser.user) && (authuser.user.role_id == 1 || !_.isEmpty(organization.acl_links.where({slug: "edit_organization_user",organization_user_role_id: parseInt(organization.organization_user_role_id)})))) { %>
										<% if(!_.isUndefined(authuser.user)){%>
										<li class="navbar-btn">              
											<div class="btn-group text-left navbar-btn dropdown">
												<button type="button" class="btn btn-default dropdown-toggle js-show-organization-member-permission-form js-change-permission-content-<%- organizations_user.attributes.id %>" data-toggle="dropdown" aria-expanded="false" data-organizations_user_id="<%- organizations_user.attributes.id %>"><%- organization_user_roles[organizations_user.attributes.organization_user_role_id - 1]	%></button>
												<button type="button" class="btn btn-default dropdown-toggle js-show-organization-member-permission-form" data-toggle="dropdown" aria-expanded="false" data-organizations_user_id="<%- organizations_user.attributes.id %>">
													<span class="caret"></span>
													<span class="sr-only"><%- i18next.t('Toggle Dropdown') %></span>
												</button>      
												<ul class="dropdown-menu arrow arrow-right js-show-organization-member-permission-form-response pre-scrollable vertical-scrollbar">
												</ul>
											</div>
										</li>
										<li class="dropdown navbar-btn text-left js-show-confirm-delete-organization-member-dropdown">
											<% 
											if(!_.isUndefined(authuser.user) && (authuser.user.role_id == 1 || !_.isEmpty(organization.acl_links.where({slug: "remove_organization_user",organization_user_role_id: parseInt(organization.organization_user_role_id)})))){%>
													<a class="btn btn-primary dropdown-toggle js-show-confirm-delete-organization-member" data-organizations_user_id="<%- organizations_user.attributes.id %>" data-toggle="dropdown" href="#"><span><i class="icon-remove"></i></span>
													<span>
													<% if(!_.isUndefined(authuser.user) && organizations_user.attributes.user_id == authuser.user.id) { %>
														<%- i18next.t('Leave') %>
													<% } else { %>
														<%- i18next.t('Remove') %>
													<% } %>
													</span></a>
													<ul class="dropdown-menu js-dropdown-popup arrow arrow-right">
														<li class="clearfix">
															<div class="col-xs-12 text-center clearfix">	
																<span class="col-xs-10"><strong><%- i18next.t('Remove Member') %></strong></span><a class="js-close-popover pull-right" href="#"><i class="icon-remove"></i></a>
															</div>
														</li>
														<li class="js-show-confirm-delete-organization-member-response divider"></li>
													</ul>
											<% } %>
										</li>
										<% } %>
										<%}%>
									</ul>
								</div>
						</div>
					</td>
				</tr>
				<% }); %>
			<% } else { %>
				<tr><td class="alert alert-info"><%- i18next.t('No %s available.', { postProcess: 'sprintf', sprintf: [i18next.t('members')] }) %></td></tr>
			<% } %>
		</tbody>
	</table>
</div>
<% } %>
</div>